<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./common.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body class="">
    <div class="top flex_x start pd12">
        <a href="./home.html"><img src="./static/image/left.png" alt=""></a>
        <span style="margin-left: 10vw;">Select Date </span>
    </div>
    <div class="content pd12">
        <div class="year">2023</div>
        <div class="weeks flex_x around mt_20">
            <span>S</span>
            <span>W</span>
            <span>T</span>
            <span>W</span>
            <span>T</span>
            <span>F</span>
            <span>S</span>

        </div>
        <div class="days  flex_x around mt_20">
            <span></span>
            <span></span>
            <span></span>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>
        <div class="days  flex_x around mt_20">
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>10</span>
            <span>11</span>
        </div>
        <div class="days  flex_x around mt_20">
            <span>12</span>
            <span>13</span>
            <span>14</span>
            <span>15</span>
            <span>16</span>
            <span>17</span>
            <span>18</span>
        </div>
        <div class="days  flex_x around mt_20">
            <span>19</span>
            <span>20</span>
            <span>21</span>
            <span>22</span>
            <span>23</span>
            <span>24</span>
            <span>25</span>
        </div>
        <div class="days  flex_x around mt_20">
            <span>26</span>
            <span>27</span>
            <span>28</span>
            <span>29</span>
            <span>30</span>
            <span> </span>
            <span> </span>
        </div>
        <div class="txt_center mt_20 color_red"> - June -</div>
    </div>
    <div class="content1"></div>
    <div class="content2"></div>
    <div class="c3 flex_x between mt_60 pd12">
        <div class="c_left">
            <div>07 June 2023</div>
            <div>Wednesday</div>
            <div>Lowest temperature：17</div>
            <div>Maximum temperature：28</div>
        </div>
        <img src="./static/image/fluent_weather-cloudy-24-filled.png" alt="">
    </div>
    <div class="c4 pos_f flex_x between">
        <div class="l_lt">
            <div class="title">7 Jun -14 Jun 2023</div>
            <div class="desc">Date Time</div>
        </div>
        <div class="l_right txt_center">Continue</div>
    </div>
</body>
<script>
    $(function () {
        $('.c3').hide()
        $('.c4').hide()
        var num1 = null
        var num2 = null
        $('.days span').click(function () {
            if ($('.active').length+1 == 2) {
                $(this).addClass('active')
                num2 = $(this).html()
               
            } else {
                num1 = $(this).html()
                $(this).addClass('active')
                $('.days span').not(this).removeClass('active')

            }
            console.log($('.days span').html(),'ppp')
            $('.days span').each(function(){
                var num = parseInt($(this).text())
                if(num >=num1 && num<=num2){
               $(this).addClass('select')
            }
            })
            if(num1>0){
                $('.c3').show()
            }
            if(num1 &&num2){
                $('.c4').show()
            }
            
            
        })
        $('.l_right').click(function(){
            window.location.href = `./search.html?b=${num1}&e=${num2}`
        })
    })

</script>

<style>
    .select{
        background-color: #fff;
        color: #231F20;
    }
    .title {
        color: #231F20;
        font-family: Avenir Next;
        font-size: 17px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .desc {
        color: #9E9A92;
        font-family: Avenir Next;
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .l_right {
        width: 126px;
        height: 36px;
        line-height: 36px;
        flex-shrink: 0;
        border-radius: 6px;
        background: #FFF;
        font-size: 12px;
        font-weight: 500;
    }

    .c4 {
        bottom: 0;
        left: 0;
        width: 100%;
        border-radius: 20px 20px 0 0;
        background-color: #ffdeba;
        padding: 24px;
        box-sizing: border-box;
    }

    .c_left {
        color: #975307;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 19px;
    }

    .c3 img {
        width: 116px;
        height: 116px;
    }

    .content1 {
        width: 90vw;
        padding: 12px;
        background-color: #fbe4cc;
        margin: 0 auto;
        border-radius: 0 0 10px 10px;
    }

    .content2 {
        width: 80vw;
        padding: 12px;
        background-color: #f5eee7;
        margin: 0 auto;
        border-radius: 0 0 10px 10px;
    }

    .active {
        background: #FAB263;
        border-radius: 5px;
        color: #fff;
    }

    .days span {
        display: inline-block;
        width: 7vw;
        font-size: 15px;
        text-align: center;
        font-weight: 500;
    }

    .weeks {
        font-size: 15px;
        font-weight: 500;
        color: #FDFDFD;
    }

    .year {
        text-align: right;
        color: #C55B0E;
        font-size: 20px;
        font-weight: 500;
        text-decoration: underline;
    }

    .top img {
        width: 8px;
        height: 11px;
        margin-right: 115px;
    }

    .top {
        font-size: 15px;
        align-items: center;
        background: #FFDEBA;
    }

    .content {
        background: #FFDEBA;
        padding-top: 40px;
    }
</style>

</html>